<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 移动端UI适配 -->
		<meta name="viewport " content="width=device, inital-scale=1.0" />
		<title>分类页</title>
		<!-- cdn 引用semantic-ui  css https://semantic-ui.com/introduction/advanced-usage.html-->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
		<link rel="stylesheet" href="../static/css/me.css" />
	</head>
	<body>

		<!-- 导航 inverted黑化 attached依附 m-shadow-small自定义阴影-->
		<nav class="ui inverted attached segment m-padding0tb-mini m-shadow-small">
			<div class="ui container">
				<!-- stackable可堆叠的 -->
				<div class="ui inverted stackable secondary menu">
					<h2 class="ui teal header item">小蜉蝣星蔚</h2>
					<!-- icon图标  https://semantic-ui.com/elements/icon.html#date--time-->
					<!-- m-item为了让jquery找到按钮 按照class找 -->
					<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="hourglass outline icon"></i></i>归档</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="user plus icon"></i></i>友链</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
					<div class="m-item m-mobile-hide right item ">
						<!-- transparent 透明 -->
						<div class="ui icon inverted  input">
							<input type="text" placeholder="搜索..." />
							<i class="search link icon"></i>
						</div>
					</div>
				</div>
			</div>

			<!-- menu toggle为了让jquery找到按钮 href="#" 什么都不跳转 -->
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>

			</a>
		</nav>

		<!-- 中间内容 -->
		<div class="m-padded-tb-large m-container-small">
			<div class="container">
				
				<!-- 分类列表头信息 middle aligned 垂直居中 teal 颜色：青绿色 -->
				<div class="ui top attached basic segment">
					<div class="ui middle aligned two column grid">
						<div class="column">
							<h3 class="ui teal header">分类</h3>
						</div>
						<div class="right aligned column">
							共计 <h2 class="ui orange header m-inline-block m-text-thin">9</h2> 类
						</div>
					</div>
				</div>
				
				<!-- 分类1：分类总览 -->
				<!--attached依附 上边的segment  -->
				<div class="ui attached segment m-padded-tb-large">
					<div class="ui labeled button m-margin-tb-tiny" >
						<a href="#" class="ui basic teal button">Java基础</a>
						<div class="ui basic teal left pointing label">5</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">Java数据结构与算法</a>
						<div class="ui basic  left pointing label">17</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">Java设计模式</a>
						<div class="ui basic  left pointing label">6</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">MySQL</a>
						<div class="ui basic  left pointing label">5</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">Spring Boot</a>
						<div class="ui basic  left pointing label">17</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">Spring</a>
						<div class="ui basic  left pointing label">5</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">Vue</a>
						<div class="ui basic  left pointing label">5</div>
					</div>
					<div class="ui labeled button m-margin-tb-tiny">
						<a href="#" class="ui basic  button">项目开发工具</a>
						<div class="ui basic  left pointing label">5</div>
					</div>
				</div>
				
				<!-- 分类2：分类下的文章 -->
				<div class="ui top attached segment teal">
						<div class="ui padded vertical segment m-padded-tb-large m-modile-lr-clear">
							<div class="ui mobile reversed stackable grid">
					
								<div class="nine wide column">
									<h3 class="ui header ">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询</h3>
									<p class="m-text">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询0.准备数据表以下SQL案例均已该建表语句为基础： major专业表
										：majorid专业ID，majorname专业名称...</p>
									<div class="ui stackable grid">
										<div class="nine wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<h4 href="#" class="item"><i class="calendar icon"></i>2020-04-26 19:57:20 <i class="eye icon"></i> 192
													</h4>
												</div>
											</div>
										</div>
										<div class="right aligned seven wide column">
											<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">MySQL</a>
										</div>
									</div>
								</div>
					
								<div class="seven wide column">
									<a href="#" target="_blank">
										<!-- 图片占位  https://picsum.photos/images-->
										<img src="../static/images/blogpic.jpg" alt="" class="ui rounded image">
									</a>
								</div>
					
							</div>
						</div>
						
						<div class="ui padded vertical segment m-padded-tb-large m-modile-lr-clear">
							<div class="ui mobile reversed stackable grid">
											
								<div class="nine wide column">
									<h3 class="ui header ">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询</h3>
									<p class="m-text">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询0.准备数据表以下SQL案例均已该建表语句为基础： major专业表
										：majorid专业ID，majorname专业名称...</p>
									<div class="ui stackable grid">
										<div class="nine wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<h4 href="#" class="item"><i class="calendar icon"></i>2020-04-26 19:57:20 <i class="eye icon"></i> 192
													</h4>
												</div>
											</div>
										</div>
										<div class="right aligned seven wide column">
											<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">MySQL</a>
										</div>
									</div>
								</div>
											
								<div class="seven wide column">
									<a href="#" target="_blank">
										<!-- 图片占位  https://picsum.photos/images-->
										<img src="../static/images/blogpic.jpg" alt="" class="ui rounded image">
									</a>
								</div>
											
							</div>
						</div>
				        
						<div class="ui padded vertical segment m-padded-tb-large m-modile-lr-clear">
							<div class="ui mobile reversed stackable grid">
											
								<div class="nine wide column">
									<h3 class="ui header ">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询</h3>
									<p class="m-text">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询0.准备数据表以下SQL案例均已该建表语句为基础： major专业表
										：majorid专业ID，majorname专业名称...</p>
									<div class="ui stackable grid">
										<div class="nine wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<h4 href="#" class="item"><i class="calendar icon"></i>2020-04-26 19:57:20 <i class="eye icon"></i> 192
													</h4>
												</div>
											</div>
										</div>
										<div class="right aligned seven wide column">
											<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">MySQL</a>
										</div>
									</div>
								</div>
											
								<div class="seven wide column">
									<a href="#" target="_blank">
										<!-- 图片占位  https://picsum.photos/images-->
										<img src="../static/images/blogpic.jpg" alt="" class="ui rounded image">
									</a>
								</div>
											
							</div>
						</div>
						
						<div class="ui padded vertical segment m-padded-tb-large m-modile-lr-clear">
							<div class="ui mobile reversed stackable grid">
											
								<div class="nine wide column">
									<h3 class="ui header ">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询</h3>
									<p class="m-text">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询0.准备数据表以下SQL案例均已该建表语句为基础： major专业表
										：majorid专业ID，majorname专业名称...</p>
									<div class="ui stackable grid">
										<div class="nine wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<h4 href="#" class="item"><i class="calendar icon"></i>2020-04-26 19:57:20 <i class="eye icon"></i> 192
													</h4>
												</div>
											</div>
										</div>
										<div class="right aligned seven wide column">
											<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">MySQL</a>
										</div>
									</div>
								</div>
											
								<div class="seven wide column">
									<a href="#" target="_blank">
										<!-- 图片占位  https://picsum.photos/images-->
										<img src="../static/images/blogpic.jpg" alt="" class="ui rounded image">
									</a>
								</div>
											
							</div>
						</div>
						
						<div class="ui padded vertical segment m-padded-tb-large m-modile-lr-clear">
							<div class="ui mobile reversed stackable grid">
											
								<div class="nine wide column">
									<h3 class="ui header ">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询</h3>
									<p class="m-text">MySQL学习笔记(5)——JOIN联表查询，自连接查询，分页和排序，子查询与嵌套查询0.准备数据表以下SQL案例均已该建表语句为基础： major专业表
										：majorid专业ID，majorname专业名称...</p>
									<div class="ui stackable grid">
										<div class="nine wide column">
											<div class="ui horizontal link list">
												<div class="item">
													<h4 href="#" class="item"><i class="calendar icon"></i>2020-04-26 19:57:20 <i class="eye icon"></i> 192
													</h4>
												</div>
											</div>
										</div>
										<div class="right aligned seven wide column">
											<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">MySQL</a>
										</div>
									</div>
								</div>
											
								<div class="seven wide column">
									<a href="#" target="_blank">
										<!-- 图片占位  https://picsum.photos/images-->
										<img src="../static/images/blogpic.jpg" alt="" class="ui rounded image">
									</a>
								</div>
											
							</div>
						</div>
				</div>
				
				<!-- 列表底部，切换页面 -->
				<div class="ui teal buttom attached  segment">
						<div class="ui middle aligned three column grid">
							<div class=" right aligned column">
								<a href="#" class="ui mini basic teal button">上一页</a>
							</div>
							<div class=" column">
								<div class="ui pagination menu">
									<div class="active item">1</div>
									<div class="item">2</div>
									<div class="item">3</div>
									<div class="item">4</div>
									<div class="item">...</div>
									<div class="item">9</div>
								</div>
							</div>
				
							<div class=" aligned column">
								<a href="#" class="ui mini basic teal button">下一页</a>
							</div>
						</div>
					</div>
				
			</div>
		</div><!-- 中间内容 -->

		<!-- 底部 -->
		<!-- segment 线框 -->
		<footer class="ui inverted vertical segment m-padded-tb-huge">
			<div class="ui center aligned container">
				<div class="ui inverted divided mobile reversed stackable grid">
					<!-- 底部1：图片 共17等分-->
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<!-- rounded 圆角 -->
								<!-- 扫码进入CSDN -->
								<h4 class="ui inverted header ">扫码进入我的CSDN</h4>
								<img src="../static/images/csdncode.png" class="ui rounded image" alt="" style="width: 100px; margin-top: 12px;">
							</div>
						</div>

					</div>
					<!-- 底部2：最新博客 -->
					<div class="four wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">Spring Boot 开发博客笔记(一)</a>
							<a href="#" class="item">Spring Boot 开发博客笔记(二)</a>
							<a href="#" class="item">Spring Boot 开发博客笔记(三)</a>
						</div>
					</div>
					<!-- 底部3：联系我 -->
					<div class="three wide column">
						<h4 class="ui inverted header">联系我</h4>
						<div class="ui inverted link list">
							<p class="m-text-thin m-opacity-tiny">QQ：2357390156 </p>
							<p class="m-text-thin m-opacity-tiny">邮箱：lipiaoMKX@163.com </p>
						</div>
					</div>
					<!-- 底部4： 博客简介-->
					<div class="six wide column">
						<h4 class="ui inverted header">博客简介</h4>
						<p class="m-text-thin m-text-spaced m-opacity-tiny">这是一个计算机科学与技术专业大三学生的个人博客，分享关于Java后端的相关的学习笔记,希望博客内容对你有所帮助...</p>
					</div>
				</div>

				<div class="ui inverted section divider">
					<p class="m-text-thin m-text-spaced m-opacity-tiny">CopyRight©2019 - 2020 Designed By 小蜉蝣星蔚</p>
				</div>

			</div>
		</footer>

		<!-- cdn 引用jquery  semantic-ui依赖于jquery https://www.jsdelivr.com/ -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

		<!-- cdn 引用semantic-ui  js-->
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.js"></script>


		<script type="text/javascript">
			$('.menu.toggle').click(function() {
				$('.m-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
